<div class="page page-notification clearfix">

    <ol class="breadcrumb breadcrumb-small">
        <li>UI Elements</li>
        <li class="active"><a href="#/ui/toasts">Alerts &amp; Toasts</a>
        </li>
    </ol>

    <div class="page-wrap">

        <div class="row">
            <div class="col-lg-6">
                <!-- Toast -->
                <div class="panel panel-lined mb30" ng-controller="ToastDemoCtrl">
                    <div class="panel-heading"><i>Toasts</i>
                    </div>
                    <div class="panel-body">
                        <div>
                            <p class="small text-muted text-uppercase">Select Animation Style</p>
                            <button type="button" class="btn btn-default" ng-model="animModel" btn-radio=" 'fade' ">Fade</button>
                            <button type="button" class="btn btn-default" ng-model="animModel" btn-radio=" 'scale' ">Scale</button>
                            <button type="button" class="btn btn-default" ng-model="animModel" btn-radio=" 'flash' ">Flash</button>
                            <button type="button" class="btn btn-default" ng-model="animModel" btn-radio=" 'bouncyflip' ">Bouncy Flip</button>
                            <button type="button" class="btn btn-default" ng-model="animModel" btn-radio=" 'genie' ">Genie</button>
                        </div>
                        <br/>
                        <div>
                            <p class="small text-muted text-uppercase">Select Position</p>
                            <button type="button" class="btn btn-default" ng-model="positionModel" btn-radio=" 'topLeft' ">TopLeft</button>
                            <button type="button" class="btn btn-default" ng-model="positionModel" btn-radio=" 'bottomLeft' ">BottomLeft</button>
                            <button type="button" class="btn btn-default" ng-model="positionModel" btn-radio=" 'topRight' ">TopRight</button>
                            <button type="button" class="btn btn-default" ng-model="positionModel" btn-radio=" 'bottomRight' ">BottomRight</button>
                        </div>
                        <br/>
                        <div class="clearfix">
                            <ui-select ng-model="noti.selected" search-enabled="true" style="width: 35%" class="left">
                                <ui-select-match>{{$select.selected}}</ui-select-match>
                                <ui-select-choices repeat="noti in notifications track by $index">
                                    <div ng-bind-html="noti | highlight: $select.search"></div>
                                </ui-select-choices>
                            </ui-select>
                            <button class="btn btn-primary btn-lg ml10" type="button" ng-click="createToast()">Create</button>
                        </div>

                        <div class="toast toast-{{positionModel}}">
                            <alert ng-repeat="toast in toasts" type="{{toast.type}}" close="closeAlert($index)" class="toast-{{toast.anim}}">
                                <div ng-bind-html="toast.msg"></div>
                            </alert>
                        </div>
                    </div>
                    <!-- #end panel-body -->
                </div>
                <!-- #end toast -->
            </div>
            <!-- #end col -->


            <div class="col-lg-6">
                <div class="panel panel-lined mb30" ng-controller="AlertDemoCtrl">
                    <div class="panel-heading"><i>Alerts</i>
                    </div>
                    <div class="panel-body">
                        <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
                            <div ng-bind-html="alert.msg"></div>
                        </alert>
                        <button class='btn btn-primary' ng-click="addAlert()">Add Alert</button>
                    </div>
                </div>
            </div>
            <!-- #end col -->
        </div>
        <!-- #end row -->


        <div class="row">
            <div class="col-lg-6">
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Badges and Labels</i>
                    </div>
                    <div class="panel-body">
                        <div class="clearfix mb15">
                            <p class="small">Add the <code>label</code> class with optional color class to create a label.</p>
                            <label class="label label-default">Default</label>
                            <label class="label label-primary">Primary</label>
                            <label class="label label-success">Success</label>
                            <label class="label label-info">Info</label>
                            <label class="label label-warning">Warning</label>
                            <label class="label label-danger">Danger</label>
                        </div>
                        <div class="clearfix">
                            <p class="small">Add the <code>badge</code> class on inline element with optional color class to create a badge.</p>
                            <span class="badge badge-primary badge-xs">new</span>
                            <span class="badge badge-danger badge-xs circle">3</span>
                            <span class="badge badge-info badge-xs flat">flat</span>
                            <span class="badge badge-warning badge-xs">5</span>
                            <span class="badge badge-success badge-xs">10</span>
                            <span class="badge badge-primary">size</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- #end row -->

    </div>
    <!-- #end page-wrap -->


</div>